<template>
  <div class="wrapper">
    <ring-chart
      width="100%"
      height="100%"
      ref="ringChart"
      :isAnimation="isAnimation"
    ></ring-chart>
  </div>
</template>

<script>
import RingChart from "@/components/chart/Chart.vue";
export default {
  components: { RingChart },
  props: {},
  data() {
    return {
      angle: 0,
      value: 80,
      timerId: null, // 定时器
      options: {},
      isAnimation: true, // 是否有动效
    };
  },
  created() {},
  mounted() {
    this.initHandle(); // 初始化图表
    this.initPlayAtuoHandle(); // 动画执行
  },
  activated() {},
  updated() {},
  methods: {
    initHandle() {
      const _this = this;
      this.options = {
        backgroundColor: "#000E1A",
        series: [
          // 紫色
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,  
                  startAngle: ((0 + _this.angle) * Math.PI) / 180, // 弧度=角度*Math.PI/180
                  endAngle: ((90 + _this.angle) * Math.PI) / 180, // 弧度=角度*Math.PI/180
                },
                style: {
                  stroke: "#8383FA",
                  // stroke: "red",
                  fill: "transparent",
                  // fill: "red",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", //紫点
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
              let point = _this.getCirlPointHandle(x0, y0, r, 90 + _this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#8450F9", //绿
                  fill: "#8450F9",
                },
                silent: true,
              };
            },
            data: [0],
          },
          // 蓝色
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
                  startAngle: ((180 + _this.angle) * Math.PI) / 180,
                  endAngle: ((270 + _this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#4386FA",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", // 蓝色
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
              let point = _this.getCirlPointHandle(
                x0,
                y0,
                r,
                180 + _this.angle
              );
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#4386FA", //绿
                  fill: "#4386FA",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                  startAngle: ((270 + -_this.angle) * Math.PI) / 180,
                  endAngle: ((40 + -_this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          // 橘色

          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                  startAngle: ((90 + -_this.angle) * Math.PI) / 180,
                  endAngle: ((220 + -_this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#FF8E89",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
              let point = _this.getCirlPointHandle(
                x0,
                y0,
                r,
                90 + -_this.angle
              );
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#FF8E89", //粉
                  fill: "#FF8E89",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", //绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
              let point = _this.getCirlPointHandle(
                x0,
                y0,
                r,
                270 + -_this.angle
              );
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CD3DB", //绿
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "吃猪肉频率",
            type: "pie",
            radius: ["52%", "40%"],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: _this.value,
                name: "",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#A098FC", // 0% 处的颜色
                        },
                        {
                          offset: 0.3,
                          color: "#4386FA", // 0% 处的颜色
                        },
                        {
                          offset: 0.6,
                          color: "#4FADFD", // 0% 处的颜色
                        },
                        {
                          offset: 0.8,
                          color: "#0CD3DB", // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#646CF9", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - _this.value,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#173164",
                  },
                },
              },
            ],
          },
          {
            name: "吃猪肉频率",
            type: "pie",
            radius: ["32%", "35%"],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: _this.value,
                name: "",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00EDF3", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#646CF9", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - _this.value,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#173164",
                  },
                },
              },
            ],
          },
        ],
      };
      _this.$refs.ringChart.initChart(this.options);
    },
    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    getCirlPointHandle(x0, y0, r, angle) {
      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
    //动画
    initPlayAtuoHandle() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(this.playAtuoHandle, 100);
    },
    // 动画
    playAtuoHandle() {
      this.angle = this.angle + 3;
      this.$refs.ringChart &&
        this.$refs.ringChart.initChart(this.options, true);
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.wrapper {
  width: 800px;
  height: 500px;
  border: 1pc solid rosybrown;
}
</style>
